<template>
	<view class="login" :style="{marginTop:systemBarHeight}">
		<view class="header">
			<image src="../../static/images/commom/back.png" class="btn back" @tap="back"></image>
			<view class="btn zhuce" @click ="assign">
				注册
			</view>
		</view>
		<view class="container">
			<view class="title">
				WIKI
			</view>
			<view class="logininfo">
				<view class="denglu">
					登录
				</view>
				<view class="welcome">
					你好！WIKI欢迎你的来到
				</view>
				<view class="input username">
					<input class="info " placeholder="请输入账号" maxlength="24" v-model="myaccount" @input = "account"/>
				</view>
				<view class="input psw">
					<input class="info" type="password" placeholder="这里输入密码" maxlength="12" v-model="mypassword" @input = "password"/>
				</view>
				<view class="tips">
					<view v-show="flag" class="text">
						账户或密码错误,请重新输入!!
					</view>
				</view>
			</view>
			<view class="assign">
				<view class="btn" @tap= "login">
					登录
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				flag:false,
				myaccount:'',
				mypassword:'',
				systemBarHeight:'0px'
			};
		},
		onLoad(e){
			this.getSysteminfo();
			// this.myaccount = this.user//获取路由地址的数据
			if(this.name){
				uni.showToast({
				    title: '登录过期,请重新登录',
				    duration: 2000,
					icon:'none',
					position:'top'
				});
				this.myaccount = this.name
				return;
			}
			if(this.psw){
				uni.showToast({
				    title: '密码修改成功,重新登录',
				    duration: 2000,
					icon:'none',
					position:'top'
				});
				return;
			}
			if(this.myaccount != ""){
				uni.showToast({
				    title: '注册成功',
				    duration: 2000,
					icon:'none',
					position:'top'
				});
				this.myaccount = this.myaccount
			}
		},
		computed:{
			...mapGetters([
				'user'
			])
		},
		methods:{
			getSysteminfo() {//获取系统栏高度
				uni.getSystemInfo({
					success: (res) => {
						this.systemBarHeight = res.statusBarHeight+'px';
						console.log(res.statusBarHeight);
					}
				});
			},
			account(e){
				this.myaccount = e.detail.value
			},
			password(e){
				this.mypassword = e.detail.value
			},
			login(){
				uni.request({
				    url: this.serverurl+'siginin/match', 
				    data: {
						data:this.myaccount,
						psw:this.mypassword
					},
					method:'POST',
				    success: (result) => {
						console.log(result.data)
				       if(result.data.status == 200){
					   this.flag = false;
					   let userinfo = result.data.data;
					   userinfo.psw = this.mypassword;//保存密码
					   this.setuser(userinfo);//使用vuex
					   try {//缓存用户信息
						uni.setStorageSync('wikiuser', JSON.stringify(userinfo));
						} 
					   catch (e) 
						{
						}
						uni.navigateTo({//用户好友列表的跳转
							url:"../friendslist/friendslist"
						})
					   }else if(result.data.status == 400){
						   this.flag = true;
						   this.mypassword = "";
					   }else if(result.data.status == 500){
						   uni.showToast({
								title: '网络异常,请检查',
								duration: 2000,
								icon:'none',
								position:'top'
						   });
					   }
				    }
				});
			},
			back(){
				// uni.navigateBack({
				//     detla:1,
				// })
			},
			assign(){
				uni.navigateTo({
					url:"../assign/assign"
			   })
			},
			...mapMutations({
				setuser:'SET_USER'
			})
		}
	}
</script>

<style lang="scss">
.login{
	position: fixed;
	top: 0;
	bottom: 0;
	width: 100%;
	.header{
		height: 120rpx;
		width: 100%;
		padding: 0 42rpx;
		display: flex;
		box-sizing: border-box;
		justify-content: space-between;
		align-items: center;
		.btn{
			width: 48rpx;
			height: 48rpx;
			&.zhuce{
				width: 80rpx;
				color: rgba(16, 16, 16, 100);
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}
	.container{
		position: absolute;
		top: 120rpx;
		bottom: 0;
		width: 100%;
		.title{
			margin-top: 180rpx;
			width: 100%;
			color: rgba(52, 199, 88, 100);
			font-size: 96rpx;
			text-align: center;
			font-weight: bold;
			font-family: Times New Roman-regular;
		}
		.logininfo{
			margin-top: 60rpx;
			padding: 0 66rpx;
			.denglu{
				color: rgba(16, 16, 16, 100);
				font-size: 56rpx;
				text-align: left;
				font-family: PingFangSC-regular;
				font-weight: bold;
				
			}
			.welcome{
				margin-bottom: 40rpx;
				color: rgba(189, 189, 189, 100);
				font-size: 28rpx;
			}
			.input{
				box-sizing: border-box;
				width: 100%;
				height: 88rpx;
				border-bottom: 1px solid rgba(187, 187, 187, 100);
				padding: 24rpx;			
				&.username{
					margin-bottom: 60rpx;
				}
				.info{
					display: inline-block;
					// color: rgba(158, 158, 158, 100);
					color: black;
					font-size: 32rpx;
					font-weight: bold;
					height: 44rpx;
				}
			}
			.tips{
				width: 100%;
				height: 60rpx;
				box-sizing: border-box;
				padding: 5rpx;
				.text{
					color: #FF2D55;
					font-size: 24rpx;
					font-weight: bold;
				}
			}
		}
		.assign{
			width: 100%;
			box-sizing: border-box;
			padding: 0 132rpx;
			.btn{
				height: 88rpx;
				line-height: 88rpx;
				opacity: 0.78;
				border-radius: 32rpx;
				background-color: rgba(52, 199, 88, 100);
				text-align: center;
				color: rgba(255, 255, 255, 100);
				font-size: 36rpx;
				font-weight: bold;
			}
		}
	}
}
</style>
